<template>
  <el-tabs v-if="dataList.length > 0" v-model="activeName" class="my_arrow_tabs">
    <el-tab-pane v-for="(item, index) in dataList" :key="index + 111" label="" :name="index">
      <slot name="default" :scope="item" :act="activeName * 1 + 1" />
    </el-tab-pane>
    <div v-if="dataList.length > 1" class="arrow_box">
      <el-button class="arrow_btn" :disabled="activeName == '0'" @click="handleClick('left')">
        <el-icon><i-ep-arrow-left /></el-icon>
      </el-button>
      <span class="arrow_num">{{ activeName * 1 + 1 }} / {{ dataList.length }}</span>
      <el-button class="arrow_btn" :disabled="activeName == dataList.length - 1" @click="handleClick('right')">
        <el-icon><i-ep-arrow-right /></el-icon>
      </el-button>
    </div>
  </el-tabs>
</template>

<script setup>
const props = defineProps({
  itemData: {
    type: Object,
    default: () => {
      return {};
    }
  },
  dataList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
const emits = defineEmits(["handleTabsArrowClick"]);

let activeName = ref(0);

watch(
  () => props.dataList,
  (val) => {
    setActiveName();
  },
  { deep: true }
);

onMounted(() => {
  setActiveName();
});

const handleClick = (type) => {
  if (type == "left" && activeName.value !== 0) {
    activeName.value = activeName.value - 1;
  } else if (type == "right" && activeName.value !== props.dataList.length - 1) {
    activeName.value = activeName.value + 1;
  }
  emits("handleTabsArrowClick", type, activeName.value);
};
const setActiveName = () => {
  activeName.value = props.dataList.length - 1;
};
</script>

<style lang="scss" scoped>
.my_arrow_tabs {
  :deep(.el-tabs__header) {
    display: none;
  }
}
</style>
